<template>
	<view class="cu-modal bottom-modal" :class="{ show: showInAuth }" @tap="closeAuthModal" style="z-index: 10080">
		<view class="login-wrap cu-dialog form-wrap safe-area-inset-bottom" @tap.stop
			style="border-radius: 20rpx 20rpx 0 0">
			<!-- 1.账号密码登录 -->
			<!-- #ifdef H5 || APP-PLUS -->
			
			<view v-if="authType === 'accountLogin'">
				<!-- 标题 -->
				<view class="head-box u-m-b-60 u-flex-col">
					<view class="u-flex u-m-b-20">
						<view class="head-title head-title-animation">账号登录</view>
						<view class="head-title-active head-title-line" @tap="showAuthModal('smsLogin')">
							短信验证
						</view>
					</view>
					<view class="head-subtitle">
						<!-- 如果未设置过密码，请点击忘记密码 -->
					</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'account-login' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon phone"> </view>
							<!-- <img src="@/static/images/phone-0.png" alt="" /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="请输入账号" @focus="onFocus($event, 'account-login')"
							@blur="checkValue($event, 'account', true)" @input="checkValue($event, 'account')"
							:placeholderStyle="placeholderStyle" v-model="form['accountLogin'].data.account"
							type="text"></u-input>
						<!-- <button
              class="u-reset-button forgot-btn"
              @tap="showAuthModal('forgotPwd')"
            >
              忘记密码
            </button> -->
					</view>
					<view class="message-error">
						{{ form['accountLogin'].error.account || '' }}
					</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'account-password' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon lock"> </view>

							<!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
              /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="请输入密码" :placeholderStyle="placeholderStyle"
							v-model="form['accountLogin'].data.password" type="password"
							@focus="onFocus($event, 'account-password')" @blur="checkValue($event, 'password', true)"
							@input="checkValue($event, 'password')"></u-input>
						<!-- <button
              class="u-reset-button login-btn-start"
              @tap="accountLoginSubmit"
            >
              登录
            </button> -->
					</view>
					<view class="message-error">
						{{ form['accountLogin'].error.password || '' }}
					</view>
				</view>
				<view class="operate">
					<button class="u-reset-button operate-btn" @tap="showAuthModal('forgotPwd')">
						忘记密码?
					</button>
					<button class="u-reset-button operate-btn" @tap="showAuthModal('register')">
						立即注册
					</button>
				</view>
				<button class="u-reset-button login-large" @tap="accountLoginSubmit">
					登录
				</button>
			</view>
			<!-- #endif -->
			
			
			<!-- 2.短信登录 -->
			<view v-if="authType === 'smsLogin'">
				<view class="head-box u-m-b-60">
					<view class="u-flex u-m-b-20">
						<view class="head-title-active" @tap="showAuthModal('accountLogin')">
							账号登录
						</view>
						<view class="head-title head-title-line head-title-animation">
							短信验证
						</view>
					</view>
					<view class="head-subtitle">
						<!-- 未注册手机号请先点击下方立即注册 -->
					</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'mobile-login' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon phone"> </view>

							<!-- <img
                class="title-icon phone"
                src="@/static/images/phone-0.png"
                alt=""
            /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="请输入手机号" @focus="onFocus($event, 'mobile-login')"
							@blur="checkValue($event, 'mobile', true)" @input="mobileInput($event, 'mobile')"
							:placeholderStyle="placeholderStyle" v-model="form['smsLogin'].data.mobile"
							type="number"></u-input>
					</view>
					<view class="message-error">{{
            form['smsLogin'].error.mobile || ''
          }}</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'code-login' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon mail"> </view>

							<!-- <img
                class="title-icon mail"
                src="@/static/images/mail-0.png"
                alt=""
            /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'code-login')"
							@blur="checkValue($event, 'code', true)" @input="checkValue($event, 'code')"
							placeholder="请输入验证码" :placeholderStyle="placeholderStyle"
							v-model="form['smsLogin'].data.code" type="number"></u-input>

						<button class="u-reset-button code-btn code-btn-start code-btn-new"
							:disabled="!form['smsLogin'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['smsLogin'].data.isMobileEnd }" @tap="getSmsCode('login')">
							{{ codeText }}
						</button>

						<!-- <button
              class="u-reset-button login-btn-start"
              @tap="smsLoginSubmit"
            >
              登录
            </button> -->
					</view>
					<view class="message-error">{{
            form['smsLogin'].error.code || ''
          }}</view>
				</view>

				<view class="operate">
					<button class="u-reset-button operate-btn" @tap="showAuthModal('forgotPwd')">
						忘记密码?
					</button>
					<button class="u-reset-button operate-btn" @tap="showAuthModal('register')">
						立即注册
					</button>
				</view>

				<!-- <button
          class="u-reset-button type-btn"
          @tap="showAuthModal('register')"
        >
          立即注册
        </button> -->
				<button class="u-reset-button login-large" @tap="smsLoginSubmit">
					登录
				</button>
			</view>

			<!-- 3.注册 -->
			<view v-if="authType === 'register'">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20 single">注册</view>
					<view class="head-subtitle">
						<!-- 请使用本人手机号完成注册 -->
					</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'mobile-sign' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon phone"> </view>
							<!-- <img
                class="title-icon phone"
                src="@/static/images/phone-0.png"
                alt=""
            /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="请输入手机号" @focus="onFocus($event, 'mobile-sign')"
							@blur="checkValue($event, 'mobile', true)" @input="mobileInput($event, 'mobile')"
							:placeholderStyle="placeholderStyle" v-model="form['register'].data.mobile"
							type="number"></u-input>
						<!-- <button
              class="u-reset-button code-btn code-btn-start"
              :disabled="!form['register'].data.isMobileEnd"
              :class="{ 'code-btn-end': form['register'].data.isMobileEnd }"
              @tap="getSmsCode('register')"
            >
              {{ codeText }}
            </button> -->
					</view>
					<view class="message-error">{{
            form['register'].error.mobile || ''
          }}</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'password-sign' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon lock"> </view>
							<!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
            /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'password-sign')"
							@blur="checkValue($event, 'password', true)" @input="checkValue($event, 'password')"
							placeholder="请输入密码" :placeholderStyle="placeholderStyle"
							v-model="form['register'].data.password" type="password"></u-input>
					</view>
					<view class="message-error">{{
            form['register'].error.password || ''
          }}</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'code-sign' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon mail"> </view>
							<!-- <img
                class="title-icon mail"
                src="@/static/images/mail-0.png"
                alt=""
            /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'code-sign')"
							@blur="checkValue($event, 'code', true)" @input="checkValue($event, 'code')"
							placeholder="请输入验证码" :placeholderStyle="placeholderStyle"
							v-model="form['register'].data.code" type="number"></u-input>

						<button class="u-reset-button code-btn code-btn-start code-btn-new"
							:disabled="!form['register'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['register'].data.isMobileEnd }"
							@tap="getSmsCode('register')">
							{{ codeText }}
						</button>

						<!-- <button
              class="u-reset-button login-btn-start"
              @tap="registerSubmit"
            >
              注册
            </button> -->
					</view>
					<view class="message-error">{{
            form['register'].error.code || ''
          }}</view>
				</view>
				<view class="operate">
					<text class=""> </text>

					<button class="u-reset-button operate-btn" @tap="showAuthModal('accountLogin')">
						返回登录
					</button>
				</view>

				<button class="u-reset-button login-large" @tap="registerSubmit">
					注册
				</button>

				<!-- <button
          v-if="!isLogin"
          class="u-reset-button type-btn"
          @tap="showAuthModal('accountLogin')"
        >
          返回登录
        </button> -->
			</view>

			<!-- 4.忘记密码 -->
			<view v-if="authType === 'forgotPwd'">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20 single">忘记密码</view>
					<view class="head-subtitle">为了您的账号安全，修改密码前请先进行安全验证</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'mobile-for' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon phone"> </view>
							<!-- <img
                class="title-icon phone"
                src="@/static/images/phone-0.png"
                alt=""
              /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'mobile-for')"
							@blur="checkValue($event, 'mobile', true)" @input="mobileInput($event, 'mobile')"
							:placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.mobile"
							type="number"></u-input>
						<!-- <button
              class="u-reset-button code-btn code-btn-start"
              :disabled="!form['forgotPwd'].data.isMobileEnd"
              :class="{ 'code-btn-end': form['forgotPwd'].data.isMobileEnd }"
              @tap="getSmsCode('resetpwd')"
            >
              {{ codeText }}
            </button> -->
					</view>
					<view class="message-error">{{
            form['forgotPwd'].error.mobile || ''
          }}</view>
				</view>

				<view class="form-item u-border-bottom" :class="hoverInput == 'code-for' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon mail"> </view>
							<!-- <img
                class="title-icon mail"
                src="@/static/images/mail-0.png"
                alt=""
            /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'code-for')"
							@blur="checkValue($event, 'code', true)" @input="checkValue($event, 'code')"
							placeholder="请输入验证码" :placeholderStyle="placeholderStyle"
							v-model="form['forgotPwd'].data.code" type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start code-btn-new"
							:disabled="!form['forgotPwd'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['forgotPwd'].data.isMobileEnd }"
							@tap="getSmsCode('resetpwd')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{
            form['forgotPwd'].error.code || ''
          }}</view>
				</view>

				<view class="form-item u-border-bottom" :class="hoverInput == 'password-for' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon lock"> </view>
							<!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
            /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'password-for')"
							@blur="checkValue($event, 'password', true)" @input="checkValue($event, 'password')"
							placeholder="请输入密码" :placeholderStyle="placeholderStyle"
							v-model="form['forgotPwd'].data.password" type="password"></u-input>
						<!-- <button
              class="u-reset-button login-btn-start"
              @tap="forgotPwdSubmit"
            >
              确认
            </button> -->
					</view>

					<view class="message-error">{{
            form['forgotPwd'].error.password || ''
          }}</view>
				</view>
				<view class="operate">
					<text class=""> </text>

					<button class="u-reset-button operate-btn" @tap="showAuthModal('accountLogin')">
						返回登录
					</button>
				</view>
				<button class="u-reset-button login-large" @tap="forgotPwdSubmit">
					确认
				</button>
				<!-- <button
          v-if="!isLogin"
          class="u-reset-button type-btn"
          @tap="showAuthModal('accountLogin')"
        >
          返回登录
        </button> -->
			</view>

			<!-- 5.绑定手机号 -->
			<view v-if="authType === 'bindMobile'">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20">绑定手机号</view>
					<view class="head-subtitle">为了您的账号安全，请绑定手机号</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'mobile-bind' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon phone"> </view>
							<!-- <img
                class="title-icon phone"
                src="@/static/images/phone-0.png"
                alt=""
            /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'mobile-bind')"
							@blur="checkValue($event, 'mobile', true)" @input="mobileInput($event, 'mobile')"
							placeholder="请输入手机号" :placeholderStyle="placeholderStyle"
							v-model="form['bindMobile'].data.mobile" type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['bindMobile'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['bindMobile'].data.isMobileEnd }"
							@tap="getSmsCode('changemobile')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{
            form['bindMobile'].error.mobile || ''
          }}</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'code-bind' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon mail"> </view>
							<!-- <img
                class="title-icon mail"
                src="@/static/images/mail-0.png"
                alt=""
              /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'code-bind')"
							@blur="checkValue($event, 'code', true)" @input="checkValue($event, 'code')"
							placeholder="请输入验证码" :placeholderStyle="placeholderStyle"
							v-model="form['bindMobile'].data.code" type="number"></u-input>
						<button class="u-reset-button login-btn-start" @tap="bindMobileSubmit">
							立即绑定
						</button>
					</view>
					<view class="message-error">{{
            form['bindMobile'].error.code || ''
          }}</view>
				</view>
			</view>

			<!-- 6.修改密码 -->
			<view v-if="authType === 'changePwd'">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20">修改密码</view>
					<view class="head-subtitle"></view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'old-bind' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon lock"> </view>
							<!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
              /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'old-bind')"
							@blur="checkValue($event, 'oldPassword', true)" @input="checkValue($event, 'oldPassword')"
							placeholder="请输入旧密码" :placeholderStyle="placeholderStyle"
							v-model="form['changePwd'].data.oldPassword" type="password"></u-input>
					</view>
					<view class="message-error">
						{{ form['changePwd'].error.oldPassword || '' }}
					</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'new-bind' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon lock"> </view>
							<!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
              /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'new-bind')"
							@blur="checkValue($event, 'newPassword', true)" @input="checkValue($event, 'newPassword')"
							placeholder="请输入新密码" :placeholderStyle="placeholderStyle"
							v-model="form['changePwd'].data.newPassword" type="password"></u-input>
					</view>
					<view class="message-error">
						{{ form['changePwd'].error.newPassword || '' }}
					</view>
				</view>
				<view class="form-item u-border-bottom" :class="hoverInput == 'reNew' ? 'focus' : ''">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">
							<view class="title-icon lock"> </view>
							<!-- <img
                class="title-icon lock"
                src="@/static/images/lock-0.png"
                alt=""
            /> -->
						</view>
						<u-input class="u-m-r-10 u-flex-1" @focus="onFocus($event, 'reNew')"
							@blur="checkValue($event, 'reNewPassword', true)"
							@input="checkValue($event, 'reNewPassword')" placeholder="再次输入新密码"
							:placeholderStyle="placeholderStyle" v-model="form['changePwd'].data.reNewPassword"
							type="password"></u-input>
					</view>
					<view class="message-error">
						{{ form['changePwd'].error.reNewPassword || '' }}
					</view>
				</view>
				<view class="editPwd-btn-box u-m-t-80">
					<button class="u-reset-button save-btn" @tap="changePwdSubmit">
						保存
					</button>
					<button class="u-reset-button forgot-btn" @tap="showAuthModal('forgotPwd')">
						忘记密码
					</button>
				</view>
			</view>

			<!-- 第三方登录 -->
		
								<!-- <image
			  class="auto-login-img wechat-icon"
			  :src="
			    $IMG_URL +
			    '/uploads/20230427/1412e48d63d35977d5ca2da4f0699413.png'
			  "
			></image> -->
			
			<!-- #ifdef MP-WEIXIN -->
			
							 
			<view v-if="
          authType === 'accountLogin' ||
          authType === 'smsLogin' ||
          authType === 'register'
        " class="auto-login-box u-flex u-row-center u-col-center" style="flex-direction: column;">
				<!-- <view class="other-title"> 其他登录方式 </view> -->

				<!-- 微信 -->
				<button v-if="
            ['App', 'wxOfficialAccount', 'wxMiniProgram'].includes(platform)
          " class="u-reset-button wechat-btn" open-type="getPhoneNumber" @getphonenumber="thirdLogin('wechat', $event)"
		  @click="thirdLogin('wechat')"
		  >
					<!-- <image
            class="auto-login-img wechat-icon"
            :src="
              $IMG_URL +
              '/uploads/20230427/1412e48d63d35977d5ca2da4f0699413.png'
            "
          ></image> -->
					手机号快捷登录
				</button>
			<view class="" @tap="closeAuthModal" style="margin-top: 10px;">取消</view>
				
				<!-- 支付宝 -->
				<!-- <image
					v-if="['App', 'alipayMiniProgram', 'H5'].includes(platform)"
					class="auto-login-img"
					@tap="thirdLogin('alipay')"
					:src="$IMG_URL + '/imgs/auto_login_ali.png'"
					mode=""
				></image> -->
				<!-- 苹果 -->
				<!-- #ifdef APP-PLUS -->
				<image v-if="device === 'ios'" class="auto-login-img" @tap="thirdLogin('apple')"
					:src="$IMG_URL + '/imgs/auto_login_iphone.png'"></image>
				<!-- #endif -->
			</view>
			<!-- #endif -->

			<!-- 协议 -->
			<view v-if="['accountLogin', 'smsLogin', 'register'].includes(authType)"
				class="agreement-box u-flex u-row-center">
				<u-checkbox v-model="protocol" shape="circle" active-color="#a084f0">
					<view class="agreement-text tcp-text u-flex u-col-center">
						我已阅读并遵守
						<view class="tcp-text u-flex u-col-center">
							<view @tap.stop="
                  $Router.push({
                    path: '/pages/public/richtext',
                    query: { id: 10, type: 'aite' },
                  })
                ">
								《用户协议》
							</view>
							<text> 与 </text>

							<view @tap.stop="
                  $Router.push({
                    path: '/pages/public/richtext',
                    query: { id: 11, type: 'aite' },
                  })
                ">
								《隐私协议》
							</view>
						</view>
					</view>
				</u-checkbox>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 登录提示页
	 */
	import FormValidate from '@/shopro/validate/form';
	import schema from '@/uview-ui/libs/util/async-validator';
	import wechat from '@/shopro/wechat/wechat';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	// #ifdef APP-PLUS
	import apple from '@/shopro/apple';
	// #endif

	export default {
		name: 'shoproAuthModal',
		data() {
			return {
				mainModal: '',
				hoverInput: '',

				platform: this.$platform.get(),
				device: this.$platform.device(),
				form: {
					// 1.账号密码登录
					accountLogin: {
						data: {
							account: '', // 账号
							password: '', // 密码
						},
						rules: {
							account: FormValidate.account,
							password: FormValidate.password,
						},
						error: {
							account: '',
							password: '',
						},
					},

					// 2.短信登录
					smsLogin: {
						data: {
							mobile: '', // 手机号
							code: '', // 验证码
							isMobileEnd: false, // 手机号输入完毕
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile,
						},
						error: {
							mobile: '', // 手机号
							code: '', // 验证码
						},
					},
					// 3.注册
					register: {
						data: {
							mobile: '', // 手机号
							code: '', // 验证码
							password: '', // 密码
							isMobileEnd: false, // 手机号输入完毕
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile,
							password: FormValidate.password,
						},
						error: {
							mobile: '', // 手机号
							code: '', // 验证码
							password: '', // 密码
						},
					},

					// 4.忘记密码
					forgotPwd: {
						data: {
							mobile: '', //手机号
							code: '', //验证码
							password: '', //密码
							isMobileEnd: false, // 手机号输入完毕
						},
						rules: {
							mobile: FormValidate.mobile,
							code: FormValidate.code,
							password: FormValidate.password,
						},
						error: {
							mobile: '', //手机号
							code: '', //验证码
							password: '', //密码
						},
					},
					// 5.绑定手机号
					bindMobile: {
						data: {
							mobile: '', //手机号
							code: '', //验证码
							isMobileEnd: false, // 手机号输入完毕
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile,
						},
						error: {
							mobile: '', //手机号
							code: '', //验证码
						},
					},
					// 6.修改密码
					changePwd: {
						data: {
							oldPassword: '', //旧密码
							newPassword: '', //新密码
							reNewPassword: '', //确认密码
						},
						rules: {
							oldPassword: FormValidate.password,
							newPassword: FormValidate.password,
							reNewPassword: [{
									required: true,
									message: '请重新输入密码',
									trigger: ['change', 'blur'],
								},
								{
									validator: (rule, value, callback) => {
										return value === this.form.changePwd.data.newPassword;
									},
									message: '两次输入的密码不一致',
									trigger: ['change', 'blur'],
								},
							],
						},
						error: {
							oldPassword: '', //旧密码
							newPassword: '', //新密码
							reNewPassword: '', //确认密码
						},
					},
				},
				codeText: '点击获取',
				disabledCode: false,
				protocol: false, //是否同意隐私协议
				placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;',
			};
		},
		 created() {
			 // #ifdef APP-PLUS || H5
			 this.closeAuthModal();
			 // #endif
		 },
		computed: {
			...mapGetters([
				'initShop',
				'isLogin',
				'authType',
				'globalAuthToast',
				'showMainAuth',
			]),
			showAuth: {
				get() {
					
					return !!this.authType;
				},
				set(value) {
					value ? uni.hideTabBar() : uni.showTabBar();
				},
			},
			showInAuth: {
				get() {
					return !!this.showMainAuth;
				},
				set(value) {},
			},
		},
		watch: {
			showAuth(val) {
				if (val && !this.globalAuthToast) {
					this.changeGlAuth({
						status: true,
						success: () => {
							uni.showModal({
								title: '温馨提示',
								content: '您还未登录，暂无访问权限，是否登录?',
								cancelText: '取消',
								confirmText: '立即登录',
								success: (res) => {
									if (res.confirm) {
										this.changeMainAuth(this.showAuth);
									} else {
										this.closeAuthModal();
									}
									this.changeGlAuth();
								},
							});
						},
					});
				} else {
					this.changeGlAuth();
				}
			},
		},
		mounted() {},
		methods: {
			...mapActions([
				'getUserInfo',
				'showAuthModal',
				'changeGlAuth',
				'changeMainAuth',
			]),

			onFocus(ev, name) {
				this.hoverInput = name;
			},

			// 检测
			checkValue(e, key, blur = false) {
				this.validation(key);
				if (blur) {
					this.hoverInput = '';
				}
			},

			// 校验数据
			validation(key, callback = () => {}) {
				let that = this;
				//拿到需要校验的数据
				let fieldValue = this.form[this.authType].data[key];
				//拿到需要检验的规则
				let rules = this.form[this.authType].rules[key];
				// 判空
				if (!rules || rules.length === 0) {
					return callback('');
				}
				// 设置当前的装填，标识为校验中
				let validateState = 'validating';
				// 调用async-validator的方法
				let validator = new schema({
					[key]: rules,
				});
				// 校验
				validator.validate({
						[key]: fieldValue,
					}, {
						firstFields: true,
					},
					(errors, fields) => {
						// 记录状态和报错信息
						validateState = !errors ? 'success' : 'error';
						let validateMessage = errors ? errors[0].message : '';
						that.form[that.authType].error[key] = validateMessage;
						callback(validateMessage);
					}
				);
			},

			// 校验全部数据
			validateAll(callback) {
				let that = this;
				return new Promise((resolve) => {
					// 对当前所有表单检验
					let valid = true; // 默认通过
					let count = 0; // 用于标记是否检查完毕
					let errorArr = []; // 存放错误信息
					let curFormData = that.form[that.authType].data;
					Object.keys(curFormData).map((field) => {
						that.validation(field, (error) => {
							// 如果回调有error
							if (error) {
								valid = false;
								errorArr.push(error);
							}
							if (++count === Object.keys(curFormData).length) {
								resolve(valid);
								if (errorArr.length) {
									this.$u.toast(errorArr[0]);
								}
								if (typeof callback == 'function') callback(valid);
							}
						});
					});
				});
			},

			// 手机号是否输入完毕
			mobileInput(e, key) {
				this.form[this.authType].data.isMobileEnd = this.$u.test.mobile(
					this.form[this.authType].data.mobile
				);
				this.validation(key);
			},

			closeAuthModal() {
				this.$store.dispatch('showAuthModal', '');
				this.$store.dispatch('changeMainAuth', '');
			},

			// 获取短信验证码
			getSmsCode(type) {
				const that = this;
				if (that.form[this.authType].data.isMobileEnd && !that.disabledCode) {
					that
						.$http(
							'v1.smsSend', {
								mobile: that.form[this.authType].data.mobile,
								event: type,
							},
							'获取验证码中...'
						)
						.then((res) => {
							if (res.code === 1) {
								that.codeChange();
								that.$u.toast('验证码已发送，请注意查收短信');
							} else {
								that.$u.toast(res.msg);
							}
						});
				} else {
					that.$u.toast('请稍后再试');
				}
			},

			// 倒计时
			codeChange() {
				if (this.disabledCode) return;
				this.disabledCode = true;
				let n = 60;
				this.codeText = n + 's';
				const run = setInterval(() => {
					n -= 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.codeText = n + 's';
					if (this.codeText < 0 + 's') {
						this.disabledCode = false;
						this.codeText = '重新获取';
					}
				}, 1000);
			},

			// 规则校验
			validateSubmit() {
				if (
					['accountLogin', 'smsLogin', 'register'].includes(this.authType) &&
					!this.protocol
				) {
					this.$u.toast('请同意用户协议');
					return false;
				}
				return this.validateAll();
			},

			// 第三方登录
			async thirdLogin(provider, payload = null) {
				if (this.platform === 'wxMiniProgram' && payload === null) return;
				if (!this.protocol) {
					this.$u.toast('请同意用户协议');
					return false;
				}
				const that = this;
				let token = '';
				
				switch (provider) {
					case 'wechat':
						token = await wechat.login(payload);
						break;
					case 'alipay':
						break;
					case 'apple':
						token = await apple.appleIdOauth();
						break;
					default:
						break;
				}
				if (token) {
					that.closeAuthModal();
					that.getUserInfo(token);
				}
			},

			// 1.账号登录
			async accountLoginSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						'v1.userLogin', {
							account: that.form['accountLogin'].data.account,
							password: that.form['accountLogin'].data.password,
						},
						'登录中...'
					)
					.then((res) => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
							that.$u.toast(res.msg);
						}
					});
			},

			// 2.短信登录
			async smsLoginSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						'v1.smsLogin', {
							mobile: that.form['smsLogin'].data.mobile,
							code: that.form['smsLogin'].data.code,
						},
						'登录中...'
					)
					.then((res) => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
							that.$u.toast(res.msg);
						}
					});
			},

			// 3.注册
			async registerSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						'user.register', {
							mobile: that.form['register'].data.mobile,
							code: that.form['register'].data.code,
							password: that.form['register'].data.password,
						},
						'注册中...'
					)
					.then((res) => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
						}
					});
			},

			// 4.忘记密码
			async forgotPwdSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						'user.forgotPwd', {
							mobile: that.form['forgotPwd'].data.mobile,
							code: that.form['forgotPwd'].data.code,
							password: that.form['forgotPwd'].data.password,
						},
						'修改中...'
					)
					.then((res) => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							if (that.isLogin) {
								that.closeAuthModal();
							} else {
								that.showAuthModal('accountLogin');
							}
						}
					});
			},

			// 5.绑定手机
			async bindMobileSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						'user.bindMobile', {
							mobile: that.form['bindMobile'].data.mobile,
							code: that.form['bindMobile'].data.code,
							password: that.form['bindMobile'].data.password,
						},
						'绑定中...'
					)
					.then((res) => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							that.closeAuthModal();
							that.getUserInfo();
						}
					});
			},

			// 6.修改密码
			async changePwdSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						'user.changePwd', {
							oldpassword: that.form['changePwd'].data.oldPassword,
							newpassword: that.form['changePwd'].data.newPassword,
						},
						'修改中...'
					)
					.then((res) => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.$u.toast(res.msg);
							that.getUserInfo(res.data.userinfo.token);
						}
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@keyframes title-animation {
		0% {
			font-size: 26rpx;
		}

		100% {
			font-size: 30rpx;
		}
	}

	.form-wrap {
		.form-item {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			padding: 20rpx 0;
			color: $u-main-color;
			box-sizing: border-box;
			line-height: $u-form-item-height;
			width: 100%;

			&.focus {
				.item-title {
					overflow: hidden;
				}

				.title-icon {
					// transform: translateY(-50rpx);
					// filter: drop-shadow(0 50rpx 0rpx rgba(160, 132, 240, 1));
					background: rgba(160, 132, 240, 1) !important;
				}

				&::after {
					content: ' ';
					position: absolute;
					left: 0;
					top: 0;
					border-bottom-color: rgba(160, 132, 240, 1);
				}
			}

			.item-title {
				position: relative;
				max-width: none;

				view,
				image {
					max-width: none;
				}

				width: 110rpx;
				min-height: 50rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: 600;
				text-align: left;

				.title-icon {
					background: rgba(158, 158, 158, 1);
				}

				.title-icon.lock {
					position: absolute;
					top: calc(50% - 22rpx);
					left: 16rpx;
					width: 43rpx;
					height: 44rpx;
					-webkit-mask-box-image: url($IMG_URL + '/uploads/20230511/e49ff2fc5222d0b9030c00178bc7f876.png');
				}

				.title-icon.mail {
					-webkit-mask-box-image: url($IMG_URL + '/uploads/20230511/00836cca5f6626096970547f74c955e2.png');
				}

				.title-icon.mail,
				.title-icon.phone {
					position: absolute;
					top: calc(50% - 25rpx);
					left: 10rpx;
					width: 50rpx;
					height: 50rpx;
				}

				.title-icon.phone {
					-webkit-mask-box-image: url($IMG_URL + '/uploads/20230511/9326a18faef6306baa40cbc10bb6afd1.png');
				}
			}

			.message-error {
				text-align: left;
				font-size: 24rpx;
				line-height: 24rpx;
				color: $u-type-error;
				margin-top: 12rpx;
				margin-left: 120rpx;
			}
		}
	}

	.login-wrap {
		padding: 30rpx 34rpx 50rpx;
		min-height: 80rpx;
		background-color: #fff;

		.head-box {
			.head-title {
				position: relative;
				min-width: 160rpx;
				// font-size: 26rpx;
				// font-weight: 600;
				// color: #3d3d3d;
				// line-height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #3d3d3d;
				line-height: 30rpx;

				// border-bottom: 2rpx solid #a084f0;
				&.single {
					&::after {
						background-color: transparent;
					}
				}

				&::after {
					content: '';
					position: absolute;
					left: calc(50% - 50rpx);
					margin: 4rpx auto 0;
					display: block;
					width: 100rpx;
					height: 4rpx;
					border-radius: 2rpx;
					background-color: #a084f0;
				}
			}

			.head-title-active {
				width: 160rpx;
				font-size: 26rpx;
				font-weight: 600;
				color: #999;
				line-height: 42rpx;
			}

			.head-title-animation {
				animation-name: title-animation;
				animation-duration: 0.1s;
				animation-timing-function: ease-out;
				animation-fill-mode: forwards;
			}

			.head-title-line {
				position: relative;

				&::before {
					content: '';
					width: 1rpx;
					height: 34rpx;
					background-color: #e4e7ed;
					position: absolute;
					left: 0rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.head-subtitle {
				font-size: 26rpx;
				font-weight: 400;
				color: #c2c7cf;
				text-align: left;
				display: flex;
			}
		}

		.code-btn[disabled] {
			background-color: #fff;
		}

		.code-btn-start.code-btn-new {
			width: 200rpx;
			background: #a084f0;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			color: #fff;
			border: 1rpx solid #a084f0;
			opacity: 1;
			box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
		}

		.code-btn-start {
			width: 160rpx;
			line-height: 56rpx;
			border: 1rpx solid #e9b766;
			border-radius: 28rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #e9b766;
			opacity: 0.5;
		}

		.forgot-btn {
			width: 160rpx;
			line-height: 56rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #999;
		}

		.code-btn-end {
			opacity: 1 !important;
		}

		.login-btn-start {
			width: 158rpx;
			line-height: 56rpx;
			background: linear-gradient(90deg, #e9b461, #eecc89);
			border-radius: 28rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.type-btn {
			padding: 20rpx;
			margin: 40rpx auto;
			width: 200rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;
		}

		.auto-login-box {
			position: relative;
			padding-top: 130rpx;
			width: 100%;

			.auto-login-img.wechat-icon {
				margin: 0 0;
			}

			.auto-login-img {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				margin: 0 30rpx;
			}
		}

		.agreement-box {
			margin: 80rpx auto 0;

			.protocol-check {
				transform: scale(0.7);
			}

			.agreement-text {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;

				text {
					color: #999999;
				}

				.tcp-text {
					color: #a084f0;
				}
			}
		}
	}

	// 修改密码
	.editPwd-btn-box {
		.save-btn {
			width: 690rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #e9b461, #eecc89);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.forgot-btn {
			width: 690rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}
	}

	.operate {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		width: 100%;
		height: 60rpx;

		// border: 1rpx solid #000;
		.operate-btn {
			font-size: 20rpx;
			font-weight: 400;
			color: #9e9e9e;
		}
	}

	.login-large {
		margin-top: 80rpx;
		width: 640rpx;
		height: 88rpx;
		background: #a084f0;
		border-radius: 168rpx 168rpx 168rpx 168rpx;
		line-height: 88rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.other-title {
		position: absolute;
		top: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 20rpx;
		font-weight: 400;
		color: #9e9e9e;
	}

	.wechat-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 342rpx;
		height: 88rpx;
		background: #50b674;
		border-radius: 168rpx 168rpx 168rpx 168rpx;

		font-size: 30rpx;
		font-weight: 400;
		color: #ffffff;
	}
</style>